<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 200px;height: 200px"></div>

</body>
<script>

    let myChart = echarts.init(document.getElementById('main'));
    let ramOption = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                // mark: { show: true },
                // dataView: { show: true, readOnly: false },
                // restore: { show: true },
                // saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                //第一个参数为内圆半径，第二个参数为外圆半径；百分比表示相当于父容器
                radius: ['20%', '60%'],
                //表示圆心的位置
                center: ['50%', '50%'],
                //南丁格尔玫瑰图，有两个参数，area和radius
                // roseType: 'radius',
                //图形样式
                itemStyle: {
                    //每一个图的圆角大小，给number表示同时设置四个，给数组表示分别设置
                    borderRadius: 8
                },
                label:{
                    overflow:'breakAll'
                },
                labelLine: {
                    //是否显示连接线
                    show: true,
                    showAbove:false,
                    length:6
                },
                //数据源
                data: [
                    {value: 100-31.7,name: '未使用'},
                    {value: 31.7, name: '已使用'},
                ]
            }
        ]
    };
    myChart.setOption(ramOption);
</script>
</html>